<template>
  <div class="con">
    <div class="echarts" id="labour5Echarts"></div>

    <div>
      <div class="table-wrapper">
      <el-table
        :data="tableData"
        style="width: 99.5%"
        height="126"
        class="table-table"
        :cell-style="{
          color: '#fff',
          backgroundColor: '#0d1d4e',
          fontSize: '13px',
          textAlign: 'center',
        }"
        :row-style="{
          color: '#fff',
          backgroundColor: '#0d1d4e',
          fontSize: '13px',
          textAlign: 'center',
        }"
        :header-cell-style="{
          backgroundColor: '#0d1d4e',
          color: '#ffffff',
          fontSize: '14px',
          textAlign: 'center',
        }"
      >
        <el-table-column prop="date1" label="检查项"> </el-table-column>
        <el-table-column prop="name" label="隐患级别"> </el-table-column>
        <el-table-column prop="address" label="状态"> </el-table-column>
        <el-table-column prop="data" label="整改截止日期"> </el-table-column>
      </el-table>
    </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "labourArea5",
  data() {
    return {
      tableData: [
        {
          date1: "主体结构",
          name: "一般隐患",
          address: "上海市普陀区",
          data: "2022-05-19",
        },
        {
          date1: "主体结构",
          name: "严重隐患",
          address: "上海市普陀区",
          data: "2022-05-19",
        },
        {
          date1: "主体结构",
          name: "重大隐患",
          address: "上海市普陀区",
          data: "2022-05-19",
        },
        {
          date1: "主体结构",
          name: "一般隐患",
          address: "上海市普陀区",
          data: "2022-05-19",
        },
        {
          date1: "主体结构",
          name: "一般隐患",
          address: "上海市普陀区",
          data: "2022-05-19",
        },
        {
          date1: "主体结构",
          name: "一般隐患",
          address: "上海市普陀区",
          data: "2022-05-19",
        },
      ],
      data11: [
        { value: 50, name: "已完成" },
        { value: 43, name: "未完成" },
      ],
      option: {
        title: [
          {
            text: "50",
            left: "225px",
            top: "25px",
            textStyle: {
              color: "#2DC6F7",
              fontSize: "16px",
            },
          },
          {
            text: "已完成",
            left: "217px",
            top: "50px",
            textStyle: {
              color: "#2DC6F7",
              fontSize: "13px",
            },
          }, // top: "41%", // 'x':'center'
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "0%",
          top: "70%",
          top: "center",
          orient: "vertical",
          icon: "circle",
          textStyle: {
            color: "#ccc",
          },

          formatter: (name) => {
            let target;
            for (let i = 0; i < this.data11.length; i++) {
              if (this.data11[i].name === name) {
                target = this.data11[i].value;
              }
            }
            let arr = [
              name + "\xa0\xa0\xa0\xa0" + target + "人" + "\xa0\xa0\xa0\xa061%",
            ];
            return arr.join("");
          },
        },
        series: [
          {
            name: "已完成",
            type: "pie",
            radius: ["100%", "80%"], // center:['100%','50%'],
            avoidLabelOverlap: false,
            left: "180px",
            top: "0px",
            label: {
              show: false,
              position: "center",
              color: "#red",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "normal",
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 50, name: "已完成" },
              { value: 43, name: "未完成" },
            ],
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {
    setTimeout(() => {
      const myCharts = this.$echarts.init(
        document.getElementById("labour5Echarts")
      );
      myCharts.setOption(this.option);
    }, 500);
  },
};
</script>
 
<style lang="scss" scoped>
.con {
  position: relative;
  .echarts {
    width: 300px;
    height: 100px;
    margin: 0 auto;
  }
  .table-wrapper {
   margin-top:3px;
  }
}
</style>